<template>
  <div class="space-y-10 mt-7">
    <div class="bar tool-dom"
      v-for="(tool, key) in toolsData"
      :id="`bestAlternative-${key}`"
      :data-handle="tool.handle"
      :data-advertisement_id="tool.advertisement_id ? tool.advertisement_id : ''"
      data-position="Top Alternative"
      :data-page_position="`Top Alternative - ${key}`"
      :data-index="key">
      <h3 class="text-2xl text-gray-1000 font-semibold">
        {{key+1}}. <common-link path="/tool/:handle"
          @click.native="handleExp(key, tool, 'Title')"
          target="_blank"
          class="hover:text-purple-1300"
          :params="{ handle: tool.handle}">
          {{$websiteName(tool)}}
        </common-link>
      </h3>
      <p class="text-base text-gray-1000 break-words mt-5"
        v-if="hasRealVal(tool.tool_website) && hasRealVal(tool.tool_website.what_is)">
        {{tool.tool_website.what_is}}
      </p>
      <p class="text-base text-gray-1000 break-words mt-5"
        v-else-if="hasRealVal(tool.description)">
        {{tool.description}}
        <!-- {{ getLocaleText(tool.description, tool.description_locales) }} -->
      </p>
      <common-link path="/tool/:handle"
        @click.native="handleExp(key, tool, 'Image')"
        target="_blank"
        :params="{ handle: tool.handle}"
        class="max-w-3xl max-h-96 mx-auto flex justify-center mt-5 overflow-hidden rounded-lg">
        <common-image class="w-full h-full"
          :src="tool.image"
          :alt="$websiteName(tool)"></common-image>
      </common-link>
      <p class="text-base text-gray-1000 font-semibold break-words mt-5"
        v-if="hasRealVal(tool.tool_website) && hasRealVal(tool.tool_website.core_features) && tool.tool_website.core_features.length > 0">
        {{$t('alternative_aiHasProsIncluding',{toolName:$websiteName(tool), num: tool.tool_website.core_features.length})}}
      </p>
      <div class="max-w-5xl mx-auto bg-gray-2600 rounded-lg sm:py-7 mt-7"
        v-if="hasRealVal(tool.tool_website) && hasRealVal(tool.tool_website.core_features) && tool.tool_website.core_features.length > 0">
        <div class="sm:flex items-center">
          <div class="flex items-center justify-center flex-shrink-0 sm:px-5 py-5 sm:w-52">{{$t('alternative_pros')}}</div>
          <div class="flex-1 border-t sm:border-t-0 sm:border-l border-gray-2000 px-7 py-5 sm:py-0">
            <ul class="space-y-5 pros-ul">
              <li v-for="(core, cKey) in tool.tool_website.core_features"
                :key="cKey">
                <div class="text-base text-gray-1000 break-words">
                  {{core}}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapActions } from 'vuex'
export default {
  name: 'TopAlternatives',
  props: {
    toolsData: {
      type: Array | null,
      default: [],
    },
  },
  mixins: [mixinsExposure],
  //TODO
  watch: {
    toolsData: {
      handler() {
        if (this.toolsData && this.toolsData.length > 0) {
          this.toolsData.forEach((item) => {
            item.loading = false
            if (item && item.image) {
              let iSrc = item.image
              if (iSrc.indexOf('x-oss-process') === -1) {
                iSrc = `${iSrc}${
                  iSrc.indexOf('?') === -1 ? '?' : '&'
                }x-oss-process=image/resize,l_768,m_lfit`
              }
              if (
                iSrc.indexOf(
                  'https://nav-station.oss-accelerate.aliyuncs.com'
                ) >= 0
              ) {
                iSrc = iSrc.replace(
                  'https://nav-station.oss-accelerate.aliyuncs.com',
                  'https://cdn-images.toolify.ai'
                )
              }
              item.image = iSrc
            }
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    ...mapActions(['exposure']),
    handleExp(key = 0, toolsData, type = 'Title') {
      this.getThrottledClickFunction(toolsData, key, type)()
    },
    getThrottledClickFunction(toolsData, key, type) {
      let functionKey = `${toolsData.handle}-${key}-${type}`
      if (!this.throttledClickFunctions[functionKey]) {
        this.throttledClickFunctions[functionKey] = _.throttle(() => {
          let index = String(key + 1).padStart(2, '0')
          let page_position = `Top Alternative - ${index}`
          let exporeData = this.getExporeData(toolsData, null, null, false, {
            page_position: page_position,
          })
          this.exposure({
            ...exporeData,
          })
        }, 2000) // 设置节流时间间隔
      }
      return this.throttledClickFunctions[functionKey]
    },
  },
}
</script>
<style lang='scss' scoped>
.pros-ul {
  li {
    div {
      position: relative;
      display: inline-block;
      max-width: 100%;
      padding-left: 16px;
      &::after {
        display: block;
        position: absolute;
        content: '';
        left: 0;
        width: 6px;
        height: 6px;
        top: 9px;
        background: #191919;
        border-radius: 50%;
      }
    }
  }
}
</style>
